<template>
  <!-- HTTML结构:要求temp late里面,有且只有一个根标签 -->
  <div>
    <h2>头</h2>
    <!--  插值表达式，也叫做大胡子、小胡子语法 -->
    <p>姓名:{{ uname.toUpperCase() + " 你好" }}</p>
    <p>年龄:{{ age }}</p>
    <p>{{ flag ? "11" : "22" }}</p>
  </div>
</template>

<script>
//对象里面可以写很多东西，比如 data、methods、computed、watch、components.....
//data 用于存储数据，写法上要求data定义成函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
export default {
  data() {
    return {
      // 页面中用到的数据，都放到这里
      uname: "zhangsan",
      age: 20,
      flag: true,
    };
  },
};
//JavaScript
</script>
<style>
/* css样式 */
</style>